<template>
  <el-select
    class="width_100"
    placeholder="请选择"
    v-model="selectValue"
    :disabled="disabled"
    filterable
    collapse-tags
    collapse-tags-tooltip
    :clearable="clearable"
    :filter-method="handleQuerySearch"
    @change="handleQueryChange"
    :multiple="multiple"
  >
    <el-option
      v-for="item in selectOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
    <VabElSelectLoading
      :page="page"
      :loading="loading"
      :hasMore="hasMore"
      @loadMore="handleLoadMore"
    />
  </el-select>
</template>

<script setup lang="ts">

/**
 * @import
 */
import _ from "lodash";
import { ref } from "vue";
import { crediPullDown } from "~/src/api/dms/credit";

/**
 * @props
 */
const props = defineProps({
  value: {
    type: String,
    default: ''
  },
  type: {
    type: Number,
    default: 1,
  },
  // 数据类型
  dataType: {
    type: String,
    default: 'customer_name', //bill_no, customer_name, customer_number
  },
  returnNumber: {
    type: Boolean,
    default: false,
  },
  multiple: {
    type: Boolean,
    default: false
  },
  clearable: {
    type: Boolean,
    default: true
  },
  disabled: {
    type: Boolean,
    default: false
  }

})

/**
 * @var
 */

const proxy: any = getCurrentInstance()?.proxy

const page = ref(0);
const loading = ref(false);
const hasMore = ref(true);

const selectValue = ref<any>();
const sreachValue = ref<any>('')
const selectOptions = ref<any[]>([]);

const emit = defineEmits(['LazyChange'])

/**
 * 加载数据列表
 */
const loadDataList = async () => {
  try {
    loading.value = true;

    // 参数
    let data = {
      page: page.value,
      limit: 10,
      type: props.type, //1获取信用对象，2客户信用档案管理编号，3草稿箱信用档案编号
      filter: {
        customer_name: props.dataType == 'customer_name' ? sreachValue.value : '', // 信用对象、客户名称模糊筛选
        customer_number: props.dataType == 'customer_number' ? sreachValue.value : '', // 信用对象、客户名称模糊筛选
        bill_no: props.dataType == 'bill_no' ? sreachValue.value : '', // 编码模糊筛选
      },
    }

    // api
    const res = await crediPullDown({ ...data })

    // 遍历获取
    const list = res.data.list.map((item: any) => {
      if (props.dataType == 'customer_number')
        return { value: item.customer_number, label: item.customer_number }
      if (props.dataType == 'customer_name')
        return { value: item.customer_name, label: item.customer_name }
      if (props.dataType == 'bill_no')
        return { value: item.bill_no, label: item.bill_no }
    }) || []

    if (page.value == 1) selectOptions.value = [];

    selectOptions.value.push(...list);

    hasMore.value = selectOptions.value.length < res.data.count

  } catch (err) {
    console.error(err);
  } finally {
    loading.value = false;
  }
};

/**
 * 加载更多数据
 */
const handleLoadMore = async (value: number) => {
  page.value = value
  loadDataList();
};

/**
 * 模糊搜索
 */
const handleQuerySearch = _.throttle((value: any) => {
  // 去空格 大小写
  sreachValue.value = value?.trim().toLowerCase()
  page.value = 1
  // 加载数据
  loadDataList()
}, 1000)

/**
 * change
 */
const handleQueryChange = (value: any) => {
  emit('LazyChange', value)
}
</script>

<style lang="scss" scoped></style>

